<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/hanzimu.css">
  <title>22003170129韩梓慕</title>
</head>

<body>
  <!-- 页面头部 -->
  <header class="han-sixpage-header">
    <h1>网易云音乐人</h1>
    <ul>
      <li><a href="file:///d:/personal%20D/%E5%AD%A6%E4%B9%A0/web%20design/%E9%A1%B9%E7%9B%AE%E6%95%B4%E4%BD%93/index.html">首页</a></li>
      <li><a href="#">发现音乐</a></li>
      <li><a href="#">我的音乐</a></li>
      <li><a href="#">音乐人</a></li>
    </ul>
  </header>

  <!-- 主要内容区域 -->
  <main class="han-sixpage-main">
    <!-- 音乐人类别筛选 -->
    <div id="han-category-filter">
      <h2>音乐人类别筛选</h2>
      <ul>
        <li><a href="#">流行歌手</a></li>
        <li><a href="#">摇滚乐队</a></li>
        <li><a href="#">民谣音乐人</a></li>
        <li><a href="#">电子音乐制作人</a></li>
        <li><a href="#">更多>></a></li>
      </ul>
    </div>

    <!-- 热门音乐人推荐 --> 
    <div id="han-hot-musicians">
      <h2><a href="">热门音乐人推荐</a></h2>
      <ul class="han-musician-list">
        <div class="han-musician-item">
          <img src="./img/音乐人1.jpg">
          <h3>陈奕迅</h3>
          <p>音乐风格：流行</p>
          <p>代表作：《歌曲名1》《歌曲名2》</p>
          <a href="#">查看详情</a>
        </div>
        <div class="han-musician-item">
          <img src="./img/音乐人2.jpg">
          <h3>张杰</h3>
          <p>音乐风格：流行</p>
          <p>代表作：《歌曲名3》《歌曲名4》</p>
          <a href="#">查看详情</a>
        </div>
      </ul>
    </div>

    <!-- 入驻音乐人申请入口 -->
    <div id="han-apply-entry">
      <h2>入驻网易云音乐人</h2>
      <p class="han-intro-text">你是否也想成为网易云音乐人，在这里展示你的音乐才华？<br>与千万乐迷分享你的音乐故事，开启专属音乐之旅。</p>
      <a href="#" onclick="showApplyForm()">立即申请入驻</a>
    </div>
  </main>

 <!-- 申请入驻表单（初始隐藏） -->
 <div id="han-apply-form-section">
  <h2>入驻网易云音乐人申请</h2>
  <form action="#">
    <label for="artist-name">艺名：</label>
    <input type="text" id="artist-name" required>
    <label for="real-name">真实姓名：</label>
    <input type="text" id="real-name" required>
    <label for="music-genre">音乐风格：</label>
    <input type="text" id="music-genre" required>
    <label for="contact-email">联系邮箱：</label>
    <input type="email" id="contact-email" required>
    <label for="sample-song">上传一首样曲：</label>
    <input type="file" id="sample-song" required>
    <input type="submit" value="提交申请" class="submit-button">
  </form>
</div>


<script>
  var applyA = document.querySelector('#han-apply-entry a');
  var applySection = document.querySelector('#han-apply-form-section');
  
  applyA.onclick=function() {
    applySection.style.display = 'block';
  }
</script>

</body>

</html>